<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="carousel">
			<image class="go_back" src="@/static/images/go-left.png" @tap="goBack"></image>
				<swiper indicator-dots circular=true duration="400">
					<swiper-item class="swiper-item" v-for="(item,index) in pinfo.pics" :key="index">
						<view class="image-wrapper">
							<image :src="item" class="loaded" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="group_2 flex-col">
			<view class="group_3 flex-col">
				<view class="text-wrapper_1 flex-row">
					<view class="section_2 flex-col justify-between">
						<view class="text-wrapper_3 flex-row justify-between" v-if="pinfo.price > 0">
							<text class="text_5">{{pinfo.price}}</text>
							<text class="text_6">万</text>
						</view>
						<view class="text-wrapper_3 flex-row justify-between" v-else>
							<text class="text_5">待定</text>
						</view>
						<text class="text_7">报价</text>
					</view>
					<view class="text-wrapper_4 flex-col justify-center">
						<text class="text_8">{{pinfo.type_name}}</text>
						<text class="text_1">工程类型</text>
					</view>
					<view class="text-group_1 flex-col justify-between">
						<text class="text_10" v-if="pinfo.amount > 0">{{pinfo.amount}}㎡</text>
						<text class="text_10" v-else>待定</text>
						<text class="text_1">总工程量</text>
					</view>
				</view>
				<view class="text-wrapper_2 flex-row">
					<text class="text_2">{{pinfo.title}}</text>
				</view>
				<view class="box_2 flex-row">
					<view class="tag_1 flex-col">
						<text class="text_3">{{pinfo.type_name}}工程</text>
					</view>
					<view class="tag_1 flex-col" style="margin-left: 20upx;">
						<text class="text_3">完工结账</text>
					</view>
				</view>
			</view>
			<view class="group_4 flex-col">
				<view class="text-wrapper_5 flex-row">
					<text class="text_11">发布时间</text>
					<text class="text_12">{{pinfo.created_at}}</text>
				</view>
				<view class="text-wrapper_5 flex-row">
					<text class="text_11">项目地址</text>
					<text class="text_12">{{pinfo.address}}</text>
				</view>
				<view class="text-wrapper_5 flex-row">
					<text class="text_11">当前状态</text>
					<text class="text_12">招标中</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: 0,
				pinfo: {}
			};
		},

		onLoad: function(options) {
			let id = options.id
			if (!id) {
				this.$api.msg('缺少参数！');
				return false;
			}

			this.id = id
			this.loadData();
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			this.loadData();

			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
		},

		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			async loadData() {
				let url = '/projects/' + this.id;
				let ldata = await this.$myRequest({
					url: url
				})

				let res = ldata.data.data;
				this.pinfo = res;
			}
		}
	};
</script>
<style>
	@import '@/pages1/pages/projects-commen/common/common.css';
	@import './assets/style/index.rpx.css';

	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.go_back {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: 20rpx;
		top: 60rpx;
		z-index: 1;
	}

	.carousel {
		height: 750upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			/* height: 800upx; */
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>